<!--  -->
<template>
  <div class='queue-page'>
    <c-title text="扫码排队" :hide="false" ></c-title>
    <div class="queue-main" v-if="info && hasQueue !== false">
      <div class="queue-warp">
        <h3>排队号码</h3>
        <div class="queue-number">
          <h1>{{info.queue_sn}}</h1>
          <p>正在排队</p>
        </div>
        <div class="flex-a-c flex-j-sb footer">
          <div>等待时长</div>
          <div class="minute"><span>{{info.wait_date}}</span></div>
        </div>
      </div>
      <div class="queue-hite">
        <div class="title"><span class="iconfont icon-tishi2"></span>商家提示</div>
        <div class="desc" v-html="content"></div>
        <div class="mb-20"></div>
      </div>
    </div>
    <div class="queue-empty" v-if="hasQueue === false">
      <van-empty description="该门店暂不能排队" />
    </div>
    <van-popup   :style="{ backgroundColor: 'transparent' }"  v-model="tipsShow" @close="CloseBtn">
      <div class="serviceBox">
        <div class="poset-img">
          <div class="title">排队成功,号码为{{info.queue_sn}},{{tip}}</div>
        </div>
        <div class="posbox flex-j-c"  @click="CloseBtn">
          <span class="iconfont icon-adsystem_icon_cancle"></span>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import queueDetails_controller from "./queueDetails_controller";
export default queueDetails_controller;
</script>
<style lang="scss" scoped>
/* @import url(); 引入公共css类 */
.queue-main  ::v-deep .desc img {
  max-width: 100% !important;
  height: auto !important;
  display: block;
  border: 0 !important;
}
.mb-20 {
  height: 1.25rem;
  clear: both;
}
  .queue-main {
    margin:0.625rem 0.75rem 0 0.75rem;
    .queue-warp {
    padding:0.9375rem 0.75rem;
    border-radius: 0.625rem;
    background-color: #fff;
    margin:0 0 0.9375rem 0;
    h3 {
      text-align: left;
      font-size: 0.875rem;
      color: #00001C;
    }
    .queue-number {
      padding:1.5rem 0 2.0625rem 0;
      h1 {
        font-weight: bold;
        font-size: 2.1875rem;
        color: var(--themeBaseColor);
        padding:0 0 0.5rem 0;
      }
      p {
        font-weight: 400;
        font-size: 0.875rem;
        color: #999999;
      }
    }
    
    .footer {
      font-size: 0.875rem;
      color: #00001C;
      .minute {
        span {
          color: var(--themeBaseColor);
        }
      }
    }
  }
  .queue-hite {
      text-align: left;
      .title {
        padding:0 0 0.625rem 0;
        font-size: 0.875rem;
        
        color: #999999;
        .iconfont {
          padding:0 0.375rem 0 0;
          font-size: 0.875rem;
        }
      }
      .desc {
        font-size: 0.8125rem;
        color: #999999;
        line-height: 1.375rem;
      }
    }
  }
  .queue-empty {
    background-color: #fff;
    width:100%;
    height: 100vh;
  }
    /* 客服弹窗 */
  .serviceBox {
    width: 18.4375rem;
    // height: 25.6875rem;
    margin-bottom: 6.25rem;
    position: relative;
  }
  .poset-img {
    width: 18.4375rem;
    height: auto;
    // height: 25.6875rem;
    box-sizing: border-box;
    background-color: #fff;
    background: #FFFFFF;
    border-radius: 0.75rem 0.75rem 0.75rem 0.75rem; 
    padding:1.125rem 0.9375rem 1.125rem 0.9375rem;
  }
  .poset-img .title {
    font-weight: bold;
    font-size: 1rem;
    color: #00001C;
    padding:0 0 0.625rem 0;
    text-align: center;
  }
  .posbox {
  position: absolute;
  bottom: -5rem;
  width: 100%;
  text-align: center;
}

.posbox span {
  color: #fff;
  font-size: 3rem;
}

</style>